.note-box{
  border:0;
  background: url(../../img/intro-bg.jpg) no-repeat center center;
  background-size: 100% 100%;
  width: 20%;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  float: left;
  //&:before{
  //content: "";
  //display: inline-block;
  //padding-bottom: 50%;
  //width: .1px;
  //  color: #2e353b;
  //vertical-align: middle;
  //}
  .title{
    color: rgb(255,244,211);
    opacity: 0.7;
    background-color: rgb(22,45,55);
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: width 0.5s linear;
    &:hover{
      width: 0;
    }
    &:hover p{
      color: #fa7047;
      border-bottom: 5px solid rgb(250, 112, 71);
    }
    p{
      font-size: .5rem;
      opacity: 1;
      border-bottom: 5px solid rgb(255,244,211);
    }
    padding-top: 20%;
    padding-bottom: 20%;
  }
}
.note-title{
  border:0;
  background-size: 100% 100%;
  width: 80%;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  float: left;
  vertical-align: middle;
  padding-top: 5%;
}

